<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="16" :offset="4">
          <el-row>
            <el-col :span="5">
              <img style="width:165px; height:56px; margin-top:12px" src="@/assets/img/logo.jpg" />
            </el-col>
            <el-col :span="1" style="line-height:72px">
              |
            </el-col>
            <el-col :span="6">
              <span
                style="font-size: 48px; color: #333333;letter-spacing: 0;text-align: left;">{{ $t('brand.lg') }}</span>
            </el-col>
            <el-col :span="12" style="text-align:right;line-height:72px">
              <el-button type="text" @click="setLocale('zh-CN')"
                style="font-size: 21px;color: #555555;letter-spacing: 0;text-align: left;">
                中文
              </el-button>
              |
              <el-button type="text" @click="setLocale('en-US')"
                style="font-size: 21px;color: #555555;letter-spacing: 0;text-align: left;">
                English
              </el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="16" :offset="4">
          <el-card style="width:100 %;  height:600px" shadow="never">
            <div slot="header">
              <span>注册</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <!-- <el-steps :active="active" finish-status="success" simple style="margin:20px 0">
          <el-step title="填写账号基本信息"></el-step>
          <el-step title="创建/加入机构"></el-step>
          <el-step title="设置机构信息"></el-step>
          <el-step title="完成"></el-step>
        </el-steps> -->
            <el-steps :active="active" align-center style="margin:50px 0">
              <el-step title="填写账号基本信息"></el-step>
              <el-step title="创建/加入机构"></el-step>
              <el-step title="设置机构信息"></el-step>
              <el-step title="完成"></el-step>
            </el-steps>
            <!-- 手机号注册 -->
            <register-mobile v-if="active==0" @next="next"></register-mobile>
            <!-- 选择机构方式 -->
            <register-organization v-if="active==1" @next="next"></register-organization>
            <!-- 创建机构 -->
            <register-organization-create v-if="active==2&&!data" @next="next" @back="back">
            </register-organization-create>
            <register-ok v-if="active==3">
            </register-ok>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <el-row>
        <el-col :span="20" :offset="2" style="text-align:center">
          <!-- <p>
            <a href="http://www.uniedp.cn/#/login" target="_blank">{{ $t('login.demo') }}</a>
          </p> -->
          <p><a href="http://www.uniedp.cn" target="_blank">{{ $t('login.copyright') }}</a>2019 © uniedp.cn</p>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import registerMobile from './register-mobile'
import registerOrganization from './register-organization'
import registerOrganizationCreate from './register-organization-create'
import registerOk from './register-ok'

export default {
  data () {
    return {
      active: 0,
      data: null
    }
  },
  components: {
    registerMobile,
    registerOrganization,
    registerOrganizationCreate,
    registerOk
  },
  computed: {

  },
  created () {
    // this.next()
  },
  methods: {
    setLocale (val) {
      this.$i18n.locale = val
    },
    gotoLoginView () {
      this.$router.replace({ name: 'login' })
    },
    next (data) {
      this.active++
      this.data = data
    },
    back () {
      this.active--
    }
  }
}
</script>
